<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {handleError} from '@/utils/message'
import {PICTURE} from '@/constants/messages'
import {CloudUploadOutlined, DownloadOutlined, EyeOutlined, SearchOutlined} from '@ant-design/icons-vue'
import {Waterfall} from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import MainLayout from '@/components/layout/MainLayout.vue'
import {useAuthStore} from '@/stores/modules/auth'
import {pictureApi} from '@/api'
import type {PictureVO} from '@/types/vo/picture'

const router = useRouter()
const authStore = useAuthStore()

const loading = ref(false)
const pictures = ref<PictureVO[]>([])
const searchKeyword = ref('')

const loadPictures = async () => {
  loading.value = true
  try {
    const result = await pictureApi.list({
      current: 1,
      size: 20,
      reviewStatus: 1
    })
    pictures.value = result.records
  } catch (error: any) {
    handleError(error, PICTURE.LOAD_FAILED)
  } finally {
    loading.value = false
  }
}

const handleSearch = (value: string) => {
  const keyword = value.trim()
  if (keyword) {
    router.push({
      path: '/explore',
      query: {q: keyword}
    })
  }
}

const handlePictureClick = (picture: PictureVO) => {
  router.push(`/picture/${picture.id}`)
}

onMounted(() => {
  loadPictures()
})
</script>

<template>
  <main-layout>
    <div class="home-container">
      <!-- 搜索 Banner -->
      <div class="search-banner">
        <h1 class="banner-title">发现美好瞬间</h1>
        <div class="search-box">
          <a-input-search
              v-model:value="searchKeyword"
              allow-clear
              placeholder="搜索图片、标签、作者..."
              size="large"
              @search="handleSearch"
          >
            <template #prefix>
              <SearchOutlined/>
            </template>
          </a-input-search>
        </div>
        <div class="quick-actions">
          <a-button v-if="authStore.isLoggedIn" type="primary" @click="$router.push('/picture/upload')">
            <CloudUploadOutlined/>
            上传图片
          </a-button>
          <a-button v-else type="primary" @click="$router.push('/register')">
            立即开始
          </a-button>
        </div>
      </div>

      <!-- 最新图片瀑布流 -->
      <div class="gallery-section">
        <a-spin :spinning="loading">
          <waterfall
              v-if="pictures.length > 0"
              :breakpoints="{
                1920: {rowPerView: 4},
                1200: {rowPerView: 3},
                800: {rowPerView: 2},
                500: {rowPerView: 1}
              }"
              :gutter="20"
              :has-around-gutter="false"
              :list="pictures"
          >
            <template #item="{ item }">
              <div class="gallery-item" @click="handlePictureClick(item)">
                <img
                    :alt="item.pictureName"
                    :src="item.thumbnailUrl || item.fileUrl"
                    class="gallery-image"
                />
                <div class="glass-overlay">
                  <div class="overlay-content">
                    <h3 class="picture-title">{{ item.pictureName }}</h3>
                    <div class="picture-meta">
                      <div class="picture-author">
                        <a-avatar :size="28" :src="item.user?.userAvatar">
                          {{ item.user?.userName?.charAt(0) || 'U' }}
                        </a-avatar>
                        <span>{{ item.user?.userName || '匿名' }}</span>
                      </div>
                      <div class="picture-stats">
                        <span><EyeOutlined/> {{ item.viewCount || 0 }}</span>
                        <span><DownloadOutlined/> {{ item.downloadCount || 0 }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </waterfall>

          <a-empty v-else description="暂无图片，快去上传第一张图片吧！">
            <template #footer>
              <a-button v-if="authStore.isLoggedIn" type="primary" @click="$router.push('/picture/upload')">
                立即上传
              </a-button>
              <a-button v-else type="primary" @click="$router.push('/register')">
                注册账号
              </a-button>
            </template>
          </a-empty>
        </a-spin>
      </div>

    </div>
  </main-layout>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as *;

.home-container {
  @include container;
  padding: 0;
}

// 搜索 Banner
.search-banner {
  padding: $spacing-3xl $spacing-lg $spacing-2xl;
  text-align: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
  margin-bottom: $spacing-2xl;

  @include responsive($breakpoint-md) {
    padding: $spacing-2xl $spacing-md $spacing-xl;
    margin-bottom: $spacing-xl;
  }

  .banner-title {
    font-size: $font-4xl;
    font-weight: $font-extrabold;
    margin-bottom: $spacing-xl;
    background: $gradient-primary;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;

    @include responsive($breakpoint-md) {
      font-size: $font-3xl;
      margin-bottom: $spacing-lg;
    }
  }

  .search-box {
    max-width: 700px;
    margin: 0 auto $spacing-lg;

    :deep(.ant-input-search) {
      .ant-input-wrapper {
        border-radius: $radius-full;
        overflow: hidden;
        box-shadow: $shadow-lg;

        .ant-input {
          height: 56px;
          font-size: $font-lg;
          border: 2px solid transparent;
          background: white;
          transition: $transition-all;

          &:hover {
            border-color: rgba($primary-color, 0.3);
          }

          &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
          }
        }

        .ant-input-group-addon {
          .ant-btn {
            height: 56px;
            width: 56px;
            border: none;
            background: $gradient-primary;
            color: white;

            &:hover {
              background: $primary-dark;
            }
          }
        }
      }
    }
  }

  .quick-actions {
    :deep(.ant-btn) {
      height: 40px;
      padding: 0 $spacing-xl;
      border-radius: $radius-lg;
      font-weight: $font-semibold;
      box-shadow: $shadow-sm;

      &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-md;
      }
    }

    :deep(.ant-btn-primary) {
      background: $gradient-primary;
      border: none;
    }
  }
}

// 画廊区域
.gallery-section {
  padding: 0 $spacing-xl $spacing-3xl;

  @include responsive($breakpoint-md) {
    padding: 0 $spacing-lg $spacing-2xl;
  }
}

// 瀑布流图片卡片
.gallery-item {
  position: relative;
  cursor: pointer;
  border-radius: $radius-2xl;
  transition: $transition-all;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  &:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);

    .glass-overlay {
      opacity: 1;
    }
  }

  .gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: $radius-2xl;
  }

  // 毛玻璃遮罩层
  .glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: $spacing-xl;

    .overlay-content {
      width: 100%;
      color: white;

      .picture-title {
        font-size: $font-xl;
        font-weight: $font-extrabold;
        margin: 0 0 $spacing-lg 0;
        color: white;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .picture-meta {
        .picture-author {
          display: flex;
          align-items: center;
          gap: $spacing-md;
          margin-bottom: $spacing-lg;
          padding: $spacing-sm $spacing-md;
          background: rgba(255, 255, 255, 0.15);
          backdrop-filter: blur(8px);
          border-radius: $radius-full;
          width: fit-content;

          span {
            font-size: $font-sm;
            font-weight: $font-semibold;
            color: white;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
          }

          .ant-avatar {
            border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          }
        }

        .picture-stats {
          display: flex;
          gap: $spacing-xl;
          font-size: $font-sm;
          font-weight: $font-medium;

          span {
            display: flex;
            align-items: center;
            gap: $spacing-sm;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

            .anticon {
              font-size: $font-lg;
            }
          }
        }
      }
    }
  }
}

</style>